<template>
  <div class="table-settings">
    <el-tooltip effect="dark" content="刷新" placement="top">
      <i class="icon el-icon-refresh-right" @click="handleRefresh" />
    </el-tooltip>
    <el-tooltip effect="dark" content="密度" placement="top">
      <el-dropdown trigger="click" placement="bottom" @command="handleSetSize">
        <div><svg-icon icon-class="column-height" /></div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="{ label, prop } in sizes"
            :key="prop"
            :command="prop"
            :class="{ 'table-settings__active': size === prop }"
          >{{ label }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-tooltip>
  </div>
</template>
<script>
export default {
  props: {
    size: {
      type: String,
      default: 'medium'
    }
  },
  data() {
    return {
      sizes: [
        { label: '默认', prop: 'medium' },
        { label: '中等', prop: 'small' },
        { label: '紧凑', prop: 'mini' }
      ]
    }
  },
  methods: {
    handleRefresh() {
      this.$emit('refresh')
    },
    handleSetSize(v) {
      this.$emit('set-size', v)
    }
  }
}
</script>
<style lang="scss">
.table-settings {
  & > * {
    margin-right: 12px;
  }
  .icon {
    font-size: 1.3em;
    cursor: pointer;
    font-weight: 600;
  }
  .svg-icon {
    height: 1.3em !important;
    width: 1.3em !important;
    cursor: pointer;
  }
}
.table-settings__active {
  color: #1890ff !important;
  background-color: #e3f4fc;
}
</style>
